.page-home .indexheader{
    top: 0;
    left: 0;
    right: 0;
    height: 1000px;
    width: 100%;
    overflow: hidden;
    position: absolute;
}
.page-home .indexheader::before {
    content: "";
    display: block;
    position: absolute;
    width: 150%;
    top: 0;
    left: -25%;
    height: 450px;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    background-color: var(--color);
    background-image: -webkit-radial-gradient(40% 0, var(--gradient), var(--gradient2));
    background-position: center center;
}


.page-home .search { text-align: center;  width:700px; padding: 15px; background-color: rgba(255,255,255,0.2); border-radius: 10px; color: #FFF; margin:20px auto;
}
.page-home .search .radio input,
.page-home .search .radio .layui-form-radio {display: none;}
.page-home .search .radio text {
    display: inline-block;
    height: 35px;
    line-height: 35px;
    padding: 0 20px;
    margin: 0 5px;
    background-color: #FFF;
    color: #666;
    border-radius: 10px;
    cursor: pointer;
}

.page-home .search .radio input[type='radio']:checked ~ text {
    background-color:var(--color);
    color:#FFF;
}
.page-home .search .layui-anim { color: #444; }
.page-home .search .layui-input, .search .layui-select, .search .layui-textarea{
    border:none;
    border-radius: 10px;
    background-color: #FFF;
    height: 35px;
}
.page-home .search .layui-btn { background-color:#ffeb3b; color: #333; border-radius: 10px;  }
.page-home .search .item { margin-right: 30px; }


.page-home .banner {  margin-top: 40px; }
.page-home .index_banner { margin:0 auto;background-color: unset;width: 1000px; height: 375px; border-radius: 30px; overflow: hidden; }
.page-home .index_banner>[carousel-item]>* { border-radius: 20px; background-color: unset; }
.page-home .index_banner .cover { display: block; background-size: cover;background-position: center center; width: 1000px; height: 375px;}



.page-home .section-title { color: #535353;font-size: 46px;padding: 30px 0;text-align: center;}
.page-home .section-title h2 { font-size: 18px; padding-left: 10px;  }
.page-home .section-title .more { font-size: 12px; position: absolute;bottom: 0px; right: 0; color: #999;  }
.page-home .section-content { margin-top: 10px; }


.user-mask{background:#000;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;filter:alpha(opacity=0);z-index:3;}
.user-target{left:0;opacity:0;position:absolute;top:0;width:100%;z-index:7;height:100%;}
.user-info{bottom:-61px;color:#FFF;left:0;font-family:\5FAE\8F6F\96C5\9ED1;position:absolute;padding:0 0 8px 10px;z-index:5;}
.user-nickname{color:#FFF;font:normal 22px/34px \5FAE\8F6F\96C5\9ED1;}
.user-item:hover .user-mask{opacity:0.5;filter:alpha(opacity=50);}
.user-item:hover .user-info{bottom:0;}
.user-mask,
.user-item:hover
.user-mask,
.user-info,
.user-item:hover
.user-info {
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.recommend-userbox .recommend-prev,
.recommend-userbox .recommend-next{opacity:0;transition: all .5s ease-in-out;}

.recommend-userbox:hover .recommend-prev,
.recommend-userbox:hover .recommend-next{opacity:1;filter:alpha(opacity=100);transition: all .8s ease-in-out;}

.section-recommend {
    margin-top: 70px;
    width: 100%;
    overflow: hidden;
}

.section-recommend .section-title a {
    color: #535353;
    font-size: 16px;
    margin-left: 4px;
    position: relative;
    top: 3px;
}
.recommend-userbox {
    position: relative;
    margin-top: 20px;
    height: 363px;
}
.recommend-prev, .recommend-next {
    top: 0;
    position: absolute;
    height: 100%;
    width: 40px;
    z-index: 11;
}
.recommend-prev {
    left: 0;
}
.recommend-next {
    right: 0;
}
.recommend-prev a, .recommend-next a {
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    height: 100%;
    width: 40px;
    z-index: 3;
}
.recommend-prev em, .recommend-next em {
    position: absolute;
    top: 50%;
    left: 50%;
    width:40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-top: -20px;
    margin-left: -20px;
    font-size: 40px;
    color: #FFF;
}
.recommend-prev i, .recommend-next i {
    background: #000;
    display: block;
    height: 100%;
    opacity: 0.5;
    filter: alpha(opacity=50);
    width: 100%;
}

.recommend-listbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
}
.recommend-listbox-inner {
    width: 80000px;
}
.recommend-list {
    clear: both;
    float: left;
}
.recommend-list li {
    float: left;
    margin: 0 3px 3px 0;
}

.user-item {
    background: #FFF;
    height: 180px;
    overflow: hidden;
    position: relative;
    width: 180px;
}
.user-mask {
    background: #000;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    filter: alpha(opacity=0);
    z-index: 3;
}
.user-target {
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 7;
    height: 100%;
}
.user-info {
    bottom: -70px;
    color: #FFF;
    left: 0;
    font-family: \5FAE\8F6F\96C5\9ED1;
    position: absolute;
    padding: 0 0 8px 10px;
    z-index: 5;
}
.user-nickname {
    color: #FFF;
    font: normal 22px/34px \5FAE\8F6F\96C5\9ED1;
}
.user-item .user-photo { width: 100%; height: 100%; background-image: url("/pc/img/pic_seat.svg"); background-size: cover; border:none; }
.page-home .section-article{ margin-top: 50px; }
.page-home .article-lists { margin-right: -50px; }
.page-home .article-lists .article-item { background-color: #FFF; width:370px; border-radius: 20px;overflow: hidden; float:left; margin-right:35px;}
.page-home .article-lists .article-item .cover{ height: 250px;  }
.page-home .article-lists .article-item .cover img { width: 100%; height: 100%;}
.page-home .article-lists .article-item .content { padding:0 15px 15px; }
.page-home .article-lists .article-item .title { margin:10px 0; font-weight: 700; font-size: 20px; color: #333; }
.page-home .article-lists .article-item .summary { font-size: 14px; color: #999; }
.page-home .article-lists .article-item .info { font-size: 14px; color: #999; }

.page-home .section-cases{margin-top:100px;}
.page-home .cases-userlist{background:url("/m/img/cases_bg.png") no-repeat top center;margin-top:25px;height:592px;width:100%;overflow:hidden;}
.page-home .cases-list{position:relative;}
.page-home .cases-order{position:absolute;left:50%;}
.page-home .cases-order img{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;opacity:0;filter:alpha(opacity=0);-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0);-webkit-transition:all .4s ease-out;-moz-transition:all .4s ease-out;transition:all .4s ease-out;}
.page-home .cases-list .animateing img{opacity:1;filter:alpha(opacity=100);-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);}
.page-home .cases-order p{color:#666;font-size:14px;margin-top:10px;text-align:center;opacity:0;}
.page-home .cases-animateEnd .cases-order p{opacity:1;-webkit-transition:opacity 0.7s ease-out;-moz-transition:opacity 0.7s ease-out;transition:opacity 0.7s ease-out;}
.page-home .cases-list  img { width: 100%; height: 100%; }
.page-home .cases-order-1{ width:194px;height:194px;top:167px;margin-left:20px;}
.page-home .cases-order-2{ width:124px;height:124px;top:337px;margin-left:-454px;}
.page-home .cases-order-3{width:134px;height:134px;top:426px;margin-left:-16px;}
.page-home .cases-order-4{width:154px;height:154px;top:319px;margin-left:367px;}
.page-home .cases-order-5{width:114px;height:114px;top:256px;margin-left:-236px;}
.page-home .cases-order-6{width:94px;height:94px;top:99px;margin-left:280px;}
.page-home .cases-order-7{width:124px;height:124px;top:374px;margin-left:-795px;}
.page-home .cases-order-8{width:134px;height:134px;top:70px;margin-left:-277px;}
.page-home .cases-order-9{width:104px;height:104px;top:130px;margin-left:-487px;}
.page-home .cases-order-10{width:94px;height:94px;top:191px;margin-left:-699px;}
.page-home .cases-order-11{width:94px;height:94px;top:227px;margin-left:623px;}
.page-home .cases-order-12{width:94px;height:94px;top:370px;margin-left:730px;}